<template>
  <div>
    <template style="margin:10px;">
      <el-table :data="announcements" style="width: 100%; margin: 0 auto;" >
        <el-table-column label="标题">
          <template #default="scope">
            <div style="display: flex; align-items: center" @click="lookAtAnnouncements(scope.$index,true)">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="发布人"
            prop="userName"/>
        <el-table-column
          label="日期"
          sortable
          prop="postDate"/>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 25]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pages">
      </el-pagination>
    </div>

    <!--    查看通知公告的内容-->
    <el-dialog
      :title="announcement.title"
      :visible.sync="announcementVisible"
      width="40%"
      :append-to-body="true">
      <div>
        {{announcement.content}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getAnnouncementList} from "@/api/table";

export default {
  name: "listOfNotificationAnnouncements",
  data() {
    return {
      pageNum: 1, // 当前页
      pageSize: 5, // 每页显示数量
      pages: 0, // 总页数
      announcements: [],
      announcement: {},
      announcementVisible: false,
    }
  },
  mounted() {
    this.getAnnouncementsAll(this.pageNum, this.pageSize);
  },
  methods: {
    getAnnouncementsAll: function(pageNum, pageSize) {
      getAnnouncementList(pageNum, pageSize).then(data => {
        if (data !== null) {
          this.announcements = data.data.list
          this.pageNum = data.data.pageNum
          this.pageSize = data.data.pageSize
          this.pages = data.data.total
        }
      })
      console.log(this.announcements)
    },
    lookAtAnnouncements: function(id, boolean) {
      this.announcementVisible = boolean;
      this.announcement = this.announcements[id]
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.getAnnouncementsAll(this.pageNum, this.pageSize);
    },
    handleCurrentChange: function (val) {
      this.pageNum = val;
      this.getAnnouncementsAll(this.pageNum, this.pageSize);
    },
  }
}
</script>


<style scoped lang="scss">

</style>
